<template>
  <div class="member">
    <top :title="title"></top>
    <router-link to="/member/login" v-slot="{ navigate }" custom>
      <div class="memberInfo" @click="navigate">
        <div>
          <img
            :src="info.avatar"
            alt=""
          />
          <span>{{info.nickname}}</span>
        </div>
      </div>
    </router-link>
    <div class="memberItem">
      <mt-cell
        :title="item.name"
        is-link
        v-for="item in memberCell"
        :key="item.id"
      >
        <img slot="icon" src="" width="24" height="24" />
      </mt-cell>
    </div>
  </div>
</template>

<script>
import Top from "../components/top";
export default {
  name: "Member",
  components: {
    Top,
  },
  mounted() {
    let getInfo = {};
    const token = this.$cookies.get("access_token");
    console.log(token);
    this.$http.defaults.headers.post["authorization"] = "Bearer " + token;
    this.$http
      .post("http://172.16.222.16:3000/account/getInfo", getInfo)
      .then((res) => {
        console.log(res);
        const data = res.data.data;
        this.info = data;
      });
  },
  data() {
    return {
      title: "我的",
      memberCell: [
        { id: 1, name: "我的订单" },
        { id: 2, name: "收货地址" },
        { id: 3, name: "我的帮助" },
        { id: 4, name: "我的订单" },
        { id: 5, name: "我的订单" },
      ],
      info: {
        avatar: "",
        nickname: "",
        tobeDeliverCount: 0,
        tobeEvaluationCount: 0,
        tobePayCount: 0,
        tobeReceiveCount: 0,
      },
    };
  },
};
</script>

<style>
.member {
  width: 100%;
  height: calc(100% - 55px);
  background-color: WhiteSmoke;
}
.memberItem {
  width: 100%;
  height: calc(100% - 40px - 130px);
}
.member .mint-cell-wrapper {
  background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9);
}
.memberInfo {
  background-color: white;
  margin: 0 0 15px 0;
  padding: 10px;
}
.memberInfo div {
  background-color: teal;
  display: flex;
  padding: 30px 15px;
}
.memberInfo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}
.memberInfo span {
  flex: 1;
  line-height: 50px;
}
</style>
